<template>
	<view class="container">
		<video src="https://www.dingxians.cn/shipin.mp4" :controls="false" :enable-progress-gesture="false" autoplay
			@pause="disableDoubleTap" class="fullscreen-video" @ended="onVideoEnd"
			@loadedmetadata="setInitialVideoTime">
			<cover-view class="pass_box" @click="pass" v-if="Videoflag">
				跳过
			</cover-view>
		</video>


	</view>
</template>
<script>
export default {
	props: {
		Videoflag: {//跳过按钮
			type: Boolean,
			default: false
		},
	},
	data() {
		return {

		}
	},

	methods: {
		onVideoEnd() {
			this.$emit('videoEnd');
		},
		setInitialVideoTime() {
			this.$emit('InitialVideoTime');
			console.log("视频加载完成时事件");
		},
		pass() {
			this.$emit('passVideo');
		},
		// 处理双击事件，防止默认行为
		disableDoubleTap(event) {
			this.$emit('disableVideo', event);
		}

	}
}
</script>
<style lang="scss">
video::-webkit-media-controls {
	display: none !important;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	position: relative;

	.pass_box {
		position: absolute;
		background: transparent;
		color: #fff;
		top: 240rpx;
		right: 30rpx;
		text-align: center;
		z-index: 99999999999999999999999;
		width: 100rpx;
		height: 50rpx;
		border-radius: 20rpx;
		line-height: 50rpx;
		font-size: 23rpx;
		border: 1rpx solid #CCC;
		// animation: name .8s ease infinite;

		// @keyframes name {
		// 	0% {
		// 		transform: scale(0.8);
		// 	}

		// 	50% {
		// 		transform: scale(1);
		// 	}

		// 	100% {
		// 		transform: scale(0.8)
		// 	}
		// }
	}

	.fullscreen-video {
		width: 100%;
		height: 100vh;
		object-fit: cover;
		/* 使视频全屏并覆盖容器 */
		position: absolute;
		z-index: 9999999;
		bottom: 0;
	}
}
</style>